<template>
  <div class="calendarPanel">
    <div>
      <div class="calendar-title">日历</div>
      <el-calendar ref="calendar" v-model="dayDate">
        <template #header="{ date }">
          <div class="el-calendar__title">{{ date }}</div>
          <div class="el-calendar__button-group">
            <el-button-group>
              <el-button size="small" @click="selectDate('prev-month')" :icon="ArrowLeft" />
              <el-button size="small" type="primary" @click="selectDate('today')"> 今日 </el-button>
              <el-button size="small" @click="selectDate('next-month')" :icon="ArrowRight" />
            </el-button-group>
          </div>
        </template>
        <template #date-cell="{ data }">
          <div class="calendar-cell" @click="handleDayClick(data)">
            <span>{{ data.day.split('-')[2] }}</span>
            <div class="flex mt-4px gap-col-4px">
              <template v-for="(dot, index) in getShowDots(data.day)" :key="index">
                <span
                  class="calendar-dot"
                  :class="[dot.type]"
                  :style="{ backgroundColor: dot.color, width: dot.width }"
                ></span>
              </template>
            </div>
          </div>
        </template>
      </el-calendar>
    </div>
    <div class="divider"></div>
    <calendarTabs
      :dayDate="dayDate"
      @tab-change="tabChange"
      @refresh="getMonthData(formatDate(dayDate, 'YYYYMM'))"
    />
  </div>
</template>
<script setup lang="ts">
import type { CalendarDateType, CalendarInstance } from 'element-plus'
import { ScheduleApi, ScheduleVO } from '@/api/school/schedule'
import { MeetingReserveApi, MeetingReserveVO } from '@/api/school/meeting/reserve'
import { ArrowLeft, ArrowRight } from '@element-plus/icons-vue'
import calendarTabs from './calendarTabs.vue'
import { formatDate } from '@/utils/formatTime'
// 定义日程点类型
interface ScheduleDot {
  type: string
  color: string
  width: string
}
const calendar = ref<CalendarInstance>()
const selectDate = (val: CalendarDateType) => {
  if (!calendar.value) return
  calendar.value.selectDate(val)
}
const dayDate = ref(new Date())
const monthData = ref<Recordable>({}) // 月份数据
const oldMonth = ref('')
const getMonthData = async (Month: string) => {
  oldMonth.value = Month
  try {
    if (tab.value === 'schedule') {
      monthData.value = await ScheduleApi.getScheduleByMonth(Month)
    } else if (tab.value === 'meeting') {
      const data = await MeetingReserveApi.getMeetingReserveByMonth(Month)
      monthData.value = {}
      data?.forEach((item: any) => {
        // 将日期格式化为 YYYYMMDD 格式作为 key
        const key = item.day
        monthData.value[key] = {
          isHasMyReserve: item.isHasMyReserve,
          isHasMyMeeting: item.isHasMyMeeting
        }
      })
    }
  } catch (error) {}
}
const tab = ref('schedule')
const tabChange = (val: string) => {
  tab.value = val
  getMonthData(formatDate(dayDate.value, 'YYYYMM'))
}
onMounted(() => {
  tabChange('schedule')
})
watch(dayDate, (val) => {
  // val为Date对象，格式化为yyyyMM
  const month = formatDate(val, 'YYYYMM')
  if (oldMonth.value !== month) {
    getMonthData(month)
  }
})
const selectedDate = ref('')
/** 获取指定日期的状态点 */
const getShowDots = (day: string) => {
  const key = day.replace(/-/g, '')
  const status = monthData.value?.[key] || 0
  const dots: ScheduleDot[] = []
  if (tab.value === 'schedule') {
    if (status === 1) {
      // 单日程事项
      dots.push({
        type: 'single-schedule',
        color: 'var(--el-color-primary)',
        width: '6px'
      })
    } else if (status > 1) {
      // 多日程事项，比单日程宽一倍
      dots.push({
        type: 'multi-schedule',
        color: 'var(--el-color-primary)',
        width: '12px'
      })
    }
  } else if (tab.value === 'meeting') {
    // 我的预约 - 红色点
    if (status.isHasMyReserve) {
      dots.push({
        type: 'my-reserve',
        color: '#F56C6C',
        width: '6px'
      })
    }

    // 我的会议 - 绿色点
    if (status.isHasMyMeeting) {
      dots.push({
        type: 'my-meeting',
        color: '#67C23A',
        width: '6px'
      })
    }
  }

  return dots
}
function handleDayClick(data: any) {
  // data.day格式: yyyy-mm-dd
  selectedDate.value = data.day
}
</script>
<style lang="scss" scoped>
.calendarPanel {
  display: flex;
  width: 100%;
  flex: 1;

  .calendar-title {
    margin-bottom: 8px;
    font-size: 18px;
    line-height: 28.96px;
    letter-spacing: 0;
    color: #333;
  }

  .el-calendar__title {
    font-size: 16px;
    line-height: 23.17px;
    letter-spacing: 0;
    color: #333;
  }

  .divider {
    width: 0.5px;
    margin: 0 15px;
    background-color: #e0e0e0;
  }

  :deep() {
    .el-calendar {
      width: 312px;
      height: 100%;
    }

    .el-calendar__header {
      padding: 2px;
    }

    .el-calendar__body {
      padding: 0;
    }

    .el-calendar-day {
      width: 42px;
      height: 44px;
      text-align: center;
    }

    .el-calendar-table td.is-selected {
      background-color: var(--el-color-primary-light-9) !important;
    }
  }

  .calendar-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    vertical-align: middle;
    background: var(--el-color-primary);
    border-radius: 100px;
  }

  .calendar-cell {
    position: relative;
    display: flex;
    cursor: pointer;
    flex-direction: column;
    align-items: center;
    justify-content: center;
  }
}
</style>
